<template>
  <view class="layout">
    <view class="info-content">
      <view class="title"> {{ year }}运动记录 </view>
      <view>
        <wd-text text="战胜班级" color="#333333" size="16px" />
        <wd-text :text="classPercent" color="#FF2D2D" size="32px" />
        <wd-text text="%" color="#FF2D2D" size="20px" />
        <wd-text text="的同学" color="#333333" size="20px" />
      </view>
      <view class="mt-1">
        <wd-text text="战胜年级" color="#333333" size="20px" />
        <wd-text :text="classPercent" color="#FF2D2D" size="32px" />
        <wd-text text="%" color="#FF2D2D" size="20px" />
        <wd-text text="的同学" color="#333333" size="20px" />
      </view>
      <view class="flex justify-between">
        <view class="center flex flex-col">
          <view class="flex-center">
            <view class="blue-dot mr-2" />
            <wd-text text="总时长" size="16px" color="#095AEB" />
          </view>
          <view class="flex justify-center">
            <wd-text :text="summaryHour" size="32px" color="333333" />
            <wd-text text="小时" size="16px" color="333333" />
          </view>
        </view>
        <view class="center flex flex-col">
          <view class="flex-center">
            <view class="green-dot mr-2" />
            <wd-text text="总时长" size="16px" color="#4AC396" />
          </view>
          <view class="flex justify-center">
            <wd-text :text="summaryTime" size="32px" color="333333" />
            <wd-text text="次" size="16px" color="333333" />
          </view>
        </view>
      </view>
    </view>
    <wd-calendar
      v-model="selectedDay"
      class="flex-right"
      :first-day-of-week="1"
      show-type-switch
      @confirm="handleConfirm"
    />
    <view style="width: 100%; height: 200px">
      <l-echart ref="chartRef" />
    </view>
    <wd-table
      v-if="dataList.length > 0"
      :data="dataList"
      :height="200"
      :stripe="false"
      :border="false"
    >
      <wd-table-col prop="time" label="时间" />
      <wd-table-col prop="sportName" label="项目" />
      <wd-table-col prop="score" label="成绩(个)" />
      <wd-table-col prop="evaluate" label="评价" />
      <wd-table-col prop="scoreValue" label="成长值" />
    </wd-table>
    <view v-else class="no-data"> 暂无运动数据 </view>
  </view>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";

definePage({
  // 使用 type: "home" 属性设置首页，其他页面不需要设置，默认为page
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: "custom",
    navigationBarTitleText: "运动记录",
  },
});
// 响应式数据
const chartRef = ref(null);
const echart = ref(null);
const year = ref(2025);
const classPercent = ref(86);
const gradePercent = ref(56);
const summaryHour = ref(128);
const summaryTime = ref(50);
const selectedDay = ref("");
const dataList = reactive([
  {
    time: "12:00",
    sportName: "跳绳",
    score: "90",
    evaluate: "优秀",
    scoreValue: "10",
  },
  {
    time: "12:00",
    sportName: "跳绳",
    score: "90",
    evaluate: "优秀",
    scoreValue: "10",
  },
  {
    time: "12:00",
    sportName: "跳绳",
    score: "90",
    evaluate: "优秀",
    scoreValue: "10",
  },
  {
    time: "12:00",
    sportName: "跳绳",
    score: "90",
    evaluate: "优秀",
    scoreValue: "10",
  },
]);

const optional = {
  grid: {
    top: "5%",
    left: "5%",
    right: "5%",
    bottom: 20,
    containLabel: false,
  },
  xAxis: {
    data: ["点", "击", "柱", "子", "或", "者", "两"],
    axisLabel: {
      color: "#00000",
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
  },
  yAxis: {
    axisLine: { show: false }, // 隐藏轴线
    axisTick: { show: false }, // 隐藏刻度
    splitLine: { show: false }, // 隐藏网格线
    axisLabel: {
      color: "#999",
      show: false,
    },
  },
  series: [
    {
      type: "bar",
      showBackground: true,
      barWidth: "30%",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#83bff6" },
          { offset: 0.5, color: "#188df0" },
          { offset: 1, color: "#188df0" },
        ]),
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#2378f7" },
            { offset: 0.7, color: "#2378f7" },
            { offset: 1, color: "#83bff6" },
          ]),
        },
      },
      data: [220, 182, 191, 234, 290, 330, 310],
    },
  ],
};
onLoad(() => {
  console.log("测试 uni API 自动引入: onLoad");
});

function handleConfirm() {
  console.log("测试 uni API 自动引入: handleConfirm");
}
onMounted(() => {
  console.log("mounted ");
  chartRef.value.init(echarts, (chart) => {
    chart.setOption(optional);
    echart.value = chart;
  });
});
onUnmounted(() => {
  if (echart.value) {
    echart.value.dispose();
  }
});
</script>

<style lang="scss" scoped>
.title {
  margin-top: 90px;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: normal;
  line-height: 100%;
  display: flex;
  align-items: center;
  letter-spacing: 0em;
  color: #333333;
}
.layout {
  width: 100vw;
  height: 100vh;
  background: #f5f5f5;
}

.info {
  font-size: 20px;
  color: #333333;
}
.info-content {
  width: calc(100% - 40px);
  padding: 20px;
}
.blue-dot {
  width: 8px;
  height: 8px;
  background: #095aeb;
}
.green-dot {
  width: 8px;
  height: 8px;
  background: #4ac396;
}
.flex-center {
  display: flex;
  align-items: center;
}
.no-data {
  height: 140px;
  font-size: 12px;
  font-weight: normal;
  line-height: 140px;
  text-align: center;
  letter-spacing: 0.005em;
  color: #666666;
}
.flex-right {
  display: flex;
  justify-content: flex-end;
}
</style>
